/**
 * 懒加载
 */
export default {
  directives: {
    lazy: {
      bind (el, binding, vnode, oldVnode) {
        console.log('bind')
        el.setAttribute('lazy', 'loading') // 默认状态设置为lazy='loading' 可以通过这个设置加载中的css
        el.setAttribute('lazy-src', binding.value) // 将正真的图片src塞入到自定义属性lazy-src
      },
      inserted (el, binding, vnode, oldVnode) {
        console.log('inserted')
        el.onload = () => { // 检查图片是否直接挂载在可视区
          showRealSrc(el)
        }
        window.onscroll = () => { // 滚动时检查图片是否在可视区
          // 只检查未加载的图片，减少性能损耗
          let imgNodes = document.querySelectorAll('img[lazy="loading"]') // 获取所有绑定lazyload的图片元素
          for (let i = 0, len = imgNodes.length; i < len; i++) {
            let imgNode = imgNodes[i]
            showRealSrc(imgNode)
          }
        }
      },
      update () {
        console.log('update')
      },
      componentUpdated () {
        console.log('componentUpdated')
      },
      unbind () {
        console.log('unbind')
      }
    }
  }
}

/**
 * 获取元素的绝对高度
 * @param {*} el 元素
 */
function getTop (el) {
  let T = el.offsetTop
  while ((el = el.offsetParent)) {
    T += el.offsetTop
  }
  return T
}

/**
 * 计算判断图片位置，并设置图片的真实地址
 * @param el 需要检查判断的元素
 */
function showRealSrc (el) {
  let H = document.documentElement.clientHeight // 获取可视区域高度
  let S = document.documentElement.scrollTop || document.body.scrollTop // 滚动高度
  let imgSrc = el.getAttribute('lazy-src')
  let T = getTop(el) // 元素绝对高度
  if (H + S > T) {
    el.src = imgSrc
    el.onload = () => {
      el.setAttribute('lazy', 'loaded') // 将状态设置为lazy='loaded' 可以通过这个设置加载完成的css
    }
  }
  console.log(H, S, T)
}
